<template>
  <div>
    <v-sheet tile color="primary" dark>
      <v-container>
        <v-row justify="center" class="text-center my-12 py-12">
          <v-col cols="12">
            <h1 class="text-h2 font-weight-bold" style="line-height: 1.3;">
             21017期大乐透，此时已搜集 <br />
              450326注！
            </h1>

            <h3 class="my-6 text-h6 font-weight-regular">
             每期搜集的票将在开奖日当天12点开始更新 <br />
              在开奖日当天19点停止统计
            </h3>

            <v-btn class="my-6 text-capitalize" large color="secondary">
              <v-icon left>
                mdi-fingerprint
              </v-icon>
            查看本期大乐透统计
            </v-btn>

            <v-btn
              class="my-6 text-capitalize"
              :class="{ 'ml-3': $vuetify.breakpoint.smAndUp }"
              large
              light
            >
            查看上一期
            </v-btn>
          </v-col>
        </v-row>
      </v-container>
    </v-sheet>

    <v-sheet tile class="py-12">
      <v-container>
        <div class="text-center my-12">
          <h2 class="text-h4 font-weight-bold">
          我们一起寻找规律
          </h2>

          <p class="text-h6 my-6 text--secondary">
          例如下图： <br />
          竖轴为前区各个号码、横轴为各个号码的购买次数
          </p>
        </div>

        <div class="py-12 text-center">
          <v-row justify="start">
            <v-col
              cols="6"
              lg="3"
              xl="2"
              v-for="(item, i) in barCharts"
              :key="i"
            >
             <div id="chart">
              <apexchart type="bar" height="1000"   :options="item.chartOptions" :series="item.series" :plotOptions="item.plotOptions" :xaxis="item.xaxis" ></apexchart>
 </div>
              

              

              
            </v-col>
          </v-row>
        </div>
      </v-container>
    </v-sheet>

    <v-sheet tile color="primary" class="py-12" dark>
      <v-container fill-height>
        <v-row justify="space-between" align="center">
          <v-col cols="12" md="6" lg="5" xl="4">
            <h4 class="text-subtitle-1 grey--text text--lighten-1">
              *注：复杂的统计可能需要额外的付费
            </h4>
            <h2 class="text-h3 my-4">
              更多的统计
            </h2>
            <p class="text-subtitle-1 grey--text text--lighten-1 my-8">
             利用计算机的算力来甄别概率上的盲点
            </p>

            <v-btn color="secondary" class="text-capitalize" large>
             查看更多
              <v-icon right>
                mdi-arrow-right
              </v-icon>
            </v-btn>
          </v-col>

          <v-col cols="12" md="6" lg="5">
            <v-row justify="center" align="center">
              <v-col cols="6" v-for="(item, i) in awesomeFeature" :key="i">
                <v-card
                  min-height="300px"
                  class="d-flex align-center justify-center"
                  outlined
                  light
                >
                  <v-row
                    align="center"
                    justify="center"
                    class="text-center primary--text"
                    no-gutters
                  >
                    <v-col cols="12">
                      <v-icon color="primary" s
                      ize="48">
                        {{ item.icon }}
                      </v-icon>
                    </v-col>

                    <v-col cols="12" class="mt-5 mb-3">
                      <div>
                        <h5 class="text-h6">
                          {{ item.text }}
                        </h5>
                      </div>
                    </v-col>

                    <v-col cols="12" md="8">
                      <p>
                        {{ item.subtext }}
                      </p>
                    </v-col>
                  </v-row>
                </v-card>
              </v-col>
            </v-row>
          </v-col>
        </v-row>
      </v-container>
    </v-sheet>

   


  </div>
</template>

<script>


export default {
 
  data: () => ({
    selected: false,
    barCharts: [
     {
       
                    series: [{
                      
            data: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35]
          }],
          chartOptions: {
            chart: {
              type: 'bar',
              height: 500
            },
            plotOptions: {
              bar: {
                barHeight: '100%',
                distributed: true,
                horizontal: true,
                dataLabels: {
                  position: 'bottom'
                },
              }
            },
            colors: ['#33b2df'
              
            ],
            dataLabels: {
              enabled: true,
              textAnchor: 'start',
              style: {
                colors: ['#fff']
              },
              formatter: function (val, opt) {
                return opt.w.globals.labels[opt.dataPointIndex] + ":  " + val
              },
              offsetX: 0,
              dropShadow: {
                enabled: true
              }
            },
            stroke: {
              width: 1,
              colors: ['#fff']
            },
            xaxis: {
              categories: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35
              ],
               title: {
                text: '购买次数',
                
              },
              axisTicks: {
                show:false
              },
              tooltip:{
                enabled:false
              }
              
            },
            yaxis: {
              labels: {
                show: true
              },
               title: {
                text: '前区号码',
              },
            },
            title: {
                text: '20016期大乐透',
                align: 'center',
                floating: true
            },
            subtitle: {
                text: '前区号码购买次数',
                align: 'center',
            },
            tooltip: {
              theme: 'light',
              x: {
                show: true
              },
              y: {
                title: {
                  formatter: function () {
                    return ''
                  }
                }
              }
            }
          },
          
      },  {
       
                    series: [{
                      
            data: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35]
          }],
          chartOptions: {
            chart: {
              type: 'bar',
              height: 500
            },
            plotOptions: {
              bar: {
                barHeight: '100%',
                distributed: true,
                horizontal: true,
                dataLabels: {
                  position: 'bottom'
                },
              }
            },
            colors: ['#33b2df', '#90ee7e',
              
            ],
            dataLabels: {
              enabled: true,
              textAnchor: 'start',
              style: {
                colors: ['#fff']
              },
              formatter: function (val, opt) {
                return opt.w.globals.labels[opt.dataPointIndex] + ":  " + val
              },
              offsetX: 0,
              dropShadow: {
                enabled: true
              }
            },
            stroke: {
              width: 1,
              colors: ['#fff']
            },
            xaxis: {
              categories: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35
              ],
               title: {
                text: '购买次数',
                
              },
              axisTicks: {
                show:true
              },
              tooltip:{
                enabled:false
              }
              
            },
            yaxis: {
              labels: {
                show: true
              },
               title: {
                text: '前区号码',
              },
            },
            title: {
                text: '20016期大乐透',
                align: 'center',
                floating: true
            },
            subtitle: {
                text: '前区号码购买次数',
                align: 'center',
            },
            tooltip: {
              theme: 'light',
              x: {
                show: true
              },
              y: {
                title: {
                  formatter: function () {
                    return ''
                  }
                }
              }
            }
          },
          
      },
    
    ],
    awesomeFeature: [
      {
        text: "2+0",
        icon: "mdi-vector-line",
        subtext: "前区被购买最多的2码组合",
      },
      {
        text: "3+0",
        icon: "mdi-vector-polyline",
        subtext: "前区被购买最多的3码组合",
      },
      {
        text: "4+0",
        icon: "mdi-vector-square",
        subtext: "前区被购买最多的4码组合",
      },
      {
        text: "5+0",
        icon: "mdi-vector-polygon",
        subtext: "前区被购买最多的5码组合",
      },
    ],
    sections: [
      { text: "Content Research", icon: "mdi-file-document" },
      { text: "Rank Trackin", icon: "mdi-trending-up" },
      { text: "Web Monitoring", icon: "mdi-bell" },
      { text: "Backlink Research", icon: "mdi-link" },
    ],
    details: [
      {
        text: "Content Research",
        p1:
          "Put any keyword into this tool to see which content has performed best in terms of social buzz, number of acklinks and organic search traffic.",
        p2:
          "Find all articles that mentioned your target keyword and use the 'Highlight unlinked domains' feature to see which of these websites have never linked to you.",
      },
      {
        text: "Rank Trackin",
        p1:
          "Put any keyword into this tool to see which content has performed best in terms of social buzz, number of acklinks and organic search traffic.",
        p2:
          "Find all articles that mentioned your target keyword and use the 'Highlight unlinked domains' feature to see which of these websites have never linked to you.",
      },
      {
        text: "Web Monitoring",
        p1:
          "Put any keyword into this tool to see which content has performed best in terms of social buzz, number of acklinks and organic search traffic.",
        p2:
          "Find all articles that mentioned your target keyword and use the 'Highlight unlinked domains' feature to see which of these websites have never linked to you.",
      },
      {
        text: "Backlink Research",
        p1:
          "Put any keyword into this tool to see which content has performed best in terms of social buzz, number of acklinks and organic search traffic.",
        p2:
          "Find all articles that mentioned your target keyword and use the 'Highlight unlinked domains' feature to see which of these websites have never linked to you.",
      },
    ],
  }),
  methods: {
    toggle(T) {
      console.log(T);
    },
  },
};
</script>
